<template>
    <!-- 寝室管理，管理员 -->
    <div class="app-container">
        <!-- 搜索 -->
        <el-row type="flex" justify="end" style="margin-bottom: 20px">
            <el-col :span="2" style="margin-right: 10px">
                <el-select v-model="params.livingId" placeholder="请选择区域" @change="livingChanged">
                    <el-option
                        v-for="item in livingList"
                        :key="item.id"
                        :label="item.living"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-col>
            <el-col :span="2" style="margin-right: 10px">
                <el-select v-model="params.buildingId" placeholder="请选择楼栋">
                    <el-option
                        v-for="item in buildList"
                        :key="item.id"
                        :label="item.building"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-col>
            <!-- 根据区域搜索 -->
            <el-col :span="2" style="margin-right: 10px">
                <el-select v-model="params.status" placeholder="请选择状态">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-col>
            <!-- 搜索重置按钮 -->
            <el-button type="primary" @click="getRoom" icon="el-icon-search"></el-button>
            <el-button type="primary" @click="reset">重置</el-button>
        </el-row>
        <!-- 表格展示 -->
        <el-table :data="tableData" v-loading="loading" stripe border>
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="living" label="生活区"></el-table-column>
            <el-table-column prop="building" label="楼栋"></el-table-column>
            <el-table-column prop="room" label="寝室号"></el-table-column>
            <el-table-column prop="totalNumber" label="可容纳人数"></el-table-column>
            <el-table-column prop="currentNumber" label="已入住人数"></el-table-column>
            <el-table-column prop="leaderName" label="寝室负责人"></el-table-column>
            <el-table-column prop="leaderPhone" label="负责人联系方式"></el-table-column>
            <!-- 操作按钮 -->
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" @click="inLive(scope.$index, scope.row)">入住</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="outLive(scope.$index, scope.row)"
                    >退住</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageCurrent"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getRoom } from "@/api/room";
import { getLiving } from "@/api/living"
import { getBuilding } from "@/api/building"
export default {
    data() {
        return {
            tableData: [],
            disformLabelWidth: "80px",
            living: {},
            params: {
                livingId: "",
                buildingId: "",
                room: "",
                status: "",
                currentNumber: "",
                pageCurrent: 1,
                pageSize: 10,
            },
            total:0,
            options: [{
                value: 1,
                label: '已住满'
            }, {
                value: 0,
                label: '未住满'
            }],
            loading: false,
            livingList: [],
            buildList: [],
            localRoomStd:{
                room:null,
                currentNumber:null,
                roomId:null
            }
        };
    },
    created() {
        this.getRoom();
        this.getLiving()
    },
    mounted() {
        sessionStorage.removeItem('localRoomStd')
    },
    computed: {
        ...mapGetters(["username"]),
    },
    methods: {
        // 分页
        // 监听页码变化
        handleCurrentChange(newPage) {
            this.params.pageCurrent = newPage
            this.getRoom()
        },
        // 监听size变化
        handleSizeChange(newSize) {
            this.params.pageSize = newSize
            this.getRoom()
        },
        // 获取生活区
        getLiving() {
            getLiving(this.living).then((res) => {
                this.livingList = res.data.records
            })
        },
        // 生活区改变后
        livingChanged() {
            getBuilding({ livingId: this.params.livingId }).then((res) => {
                this.buildList = res.data.records
            })
        },
        // 获取房间信息
        getRoom() {
            getRoom({
                username: this.username,
                pageSize: this.params.pageSize,
                pageCurrent: this.params.pageCurrent,
                livingId: this.params.livingId,
                buildingId: this.params.buildingId,
                room: this.params.room,
                status: this.params.status,
            }).then((res) => {
                if (res.code === "200") {
                    this.loading = true
                    setTimeout(() => {
                        this.tableData = res.data.records;
                        this.total = Number(res.data.total)
                        this.loading = false
                        console.log(res);
                    }, 200)
                }
            });
        },
        // 入住
        inLive(index, row) {
            if (row.currentNumber >= 4) {
                this.$message.error('该房间人数已满')
            } else {
                this.localRoomStd.room = row.room
                this.localRoomStd.currentNumber = row.currentNumber
                this.localRoomStd.roomId = row.id
                sessionStorage.setItem( 'localRoomStd',JSON.stringify(this.localRoomStd))
                this.$router.push({
                    path: "/dormitory/in",
                //     query: { room: row.room, currentNumber: row.currentNumber, roomId: row.id }
                })
            }
        },
        // 退住
        outLive(index, row) {
            if (row.currentNumber <= 0) {
                this.$message.error('该房间是空的')
            } else {
                this.localRoomStd.room = row.room
                this.localRoomStd.currentNumber = row.currentNumber
                this.localRoomStd.roomId = row.id
                sessionStorage.setItem( 'localRoomStd',JSON.stringify(this.localRoomStd))
                this.$router.push({
                    path: "/dormitory/out",
                //     query: { room: row.roomId, room: row.roomId, currentNumber: row.currentNumber, roomId: row.id }
                })
            }
        },
        // 搜索重置按钮
        async reset() {
            this.params.livingId = ""
            this.params.buildingId = ""
            this.params.status = ""
            getRoom({
                username: this.username,
                pageSize: this.params.pageSize,
                pageCurrent: this.params.pageCurrent,
                livingId: this.params.livingId,
                buildingId: this.params.buildingId,
                room: this.params.room,
                status: this.params.status,
            }).then((res) => {
                if (res.code === "200") {
                    this.loading = true
                    setTimeout(() => {
                        this.tableData = res.data.records;
                        this.total = Number(res.data.total)
                        this.loading = false
                        console.log(res);
                    }, 200)
                }
            });
        },
    },
};
</script>
<style lang="">
</style>